<template>
	<view>
		<view class="header">
			<view style="position: relative;">
				<uni-nav-bar height="260rpx" class="uni-nav-bar" :fixed="true" left-icon="left" :border="false"
					title="求租广场" @clickLeft="navBarClick"> </uni-nav-bar>
				<view style="width: 100%; position: absolute;bottom: 0;z-index:999;background-color: #fff;">
					<u-search placeholder="输入小区或地铁站" :showAction="false" v-model="housing_resource"></u-search>
				</view>
			</view>
		</view>
		<view class="center">
			<view style="width: 100%;">
				<view style="width: 89%;padding: 27rpx 40rpx;" v-for="(room,index) in PostsList" :key="index">
					<view style="width: 100%; height: 100rpx; line-height: 100rpx; display: flex;">
						<view style="width: 18%;" class="container-IMAGE">
							<image style="width: 100rpx;height: 100rpx; border-radius: 50%;" :src="room.imgSrc">
							</image>
						</view>
						<view style="width: 57%;">
							{{ room.userName }}
						</view>
						<view style="width: 25%;font-size: 26rpx;color: #929292;text-align: right;">
							{{room.roomCreateDate}}
						</view>
					</view>

					<view style="width: 100%;line-height:60rpx;">
						<view>{{room.roomTitle}}</view>
						<view style="width: 100%;display: flex;">
							<view style="margin: 5rpx;" v-for="(item,TableIndex) in room.roomLabel" :key="TableIndex">
								<u-tag size='mini' :text="item" plain> </u-tag>
							</view>
						</view>
						<view>
							<u--text prefixIcon="map" :size='13' iconStyle="font-size: 29rpx"
								:text="room.roomAddress"></u--text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				housing_resource: '',
				PostsList: [{
						imgSrc: "https://tse1-mm.cn.bing.net/th/id/OIP-C.aED4ZuwVrhH7pSb5Jz0xMgHaJ3?rs=1&pid=ImgDetMain",
						userName: '小妹妹',
						roomCreateDate: '1天内发布',
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
					},
					{
						imgSrc: "https://c-ssl.duitang.com/uploads/blog/202303/14/20230314113525_484ed.jpg",
						userName: '小姐姐',
						roomCreateDate: '1天内发布',
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁']
					}, {
						imgSrc: "https://tse1-mm.cn.bing.net/th/id/OIP-C.aED4ZuwVrhH7pSb5Jz0xMgHaJ3?rs=1&pid=ImgDetMain",
						userName: '小妹妹',
						roomCreateDate: '1天内发布',
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
					},
					{
						imgSrc: "https://c-ssl.duitang.com/uploads/blog/202303/14/20230314113525_484ed.jpg",
						userName: '小姐姐',
						roomCreateDate: '1天内发布',
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁']
					}, {
						imgSrc: "https://tse1-mm.cn.bing.net/th/id/OIP-C.aED4ZuwVrhH7pSb5Jz0xMgHaJ3?rs=1&pid=ImgDetMain",
						userName: '小妹妹',
						roomCreateDate: '1天内发布',
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
					},
					{
						imgSrc: "https://c-ssl.duitang.com/uploads/blog/202303/14/20230314113525_484ed.jpg",
						userName: '小姐姐',
						roomCreateDate: '1天内发布',
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁']
					}
				],
			};
		},
		methods: {
			navBarClick() {
				uni.navigateBack()
			}
		}

	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 280rpx;
		position: fixed;
		z-index:999;
		top: 0;
		background-color: #fff;

		//自定义uni-nav-bar导航栏标题样式
		/deep/ .uni-nav-bar .uni-nav-bar-text {
			font-size: 39rpx !important;
			color: black !important;
			font-weight: bold;
		}
	}
	.center{
		margin-top: 300rpx;
	}
</style>